<template>
  <section id="words" class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <SectionTitle title="美好文字" subtitle="那些打动人心的句子，如同散落在生活中的星光" />

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <QuoteCard v-for="(quote, index) in quotes" :key="index" :quote="quote" />
      </div>

      <div class="mt-10 text-center">
        <router-link to="/quotes"
          class="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium transition-colors">
          更多文字收藏 <i class="fa fa-long-arrow-right"></i>
        </router-link>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import SectionTitle from '@/components/ui/SectionTitle.vue'
import QuoteCard from '@/components/cards/QuoteCard.vue'
import { quotesData } from '@/data/quotes.js'

const quotes = ref(quotesData)
</script>